<!-- src/views/stocktaking/task/InventoryDisplay.vue -->
<script setup>
import { ref, defineProps } from 'vue'

const props = defineProps({
  inventoryData: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: '库存信息'
  }
})

const visible = ref(false)

const open = () => {
  visible.value = true
}

const close = () => {
  visible.value = false
}
const selectGoods = ref([])
const handleSelectionChange = (val) => {
  selectGoods.value = val
}
defineExpose({
  open,
  close,
  selectGoods
})
</script>

<template>
  <el-dialog v-model="visible" :title="title" width="80%">
    <el-table :data="inventoryData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="#" width="50" />
      <el-table-column prop="id" label="id" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="goodName" label="商品名称" />
      <el-table-column prop="price" label="商品价格" />
      <el-table-column prop="availableQuantity" label="可用数量" />
      <el-table-column label="分配数量" width="120">
        <template #default="{ row }">
          <el-input-number v-model="row.quantity" :min="0" :max="row.availableQuantity" size="small"
            style="width: 100px;" />
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="visible = false">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>